
<div class="pure-u-1">
<header>
<div class="pure-u-1 pure-u-md-1-2">
		<h4 class="secondary-title">{{ui_title}}</h4>
</div><!--pure-->
		{{^firstuse}}<div class="pure-u-1 pure-u-md-1-2">
			<ul class="inline-subnav">
				<li><a href="{{www_path}}/commerce/subscriptions/add" class="lightboxed"><div class="icon icon-circle-plus"></div> {{copy_add_plan}}</a></li>
			</ul>
	</div><!--pure-->{{/firstuse}}
</header>
</div><!--pure-->

{{#firstuse}}
{{! ****************************************************************************
{{
{{  SPECIAL FIRST USE SECTION WITH CONNECTION OPTIONS
{{
{{  ************************************************************************* }}
<div class="alt callout usecolor4"><div class="callout-inner">
	<div class="pure-u-1 pure-u-md-1-2">
		<h3 class="firstuse-title">{{{copy_firstuse}}}</h3>
	</div>
	<div class="pure-u-1 pure-u-md-1-2">
		<div class="browser-header"><span></span><span></span><span></span></div><!--brower-header-->
		<img src="{{www_path}}/assets/images/firstuse/subscriptions_screen.jpg" alt="screenshot" />
	</div>
</div><!--callout-inner-->
</div><!--callout-->
{{/firstuse}}


{{^firstuse}}
		<ul class="alternating">
			{{#plans}}
			<li><a class="material primary" href="{{www_path}}/commerce/subscriptions/detail/{{id}}"><div class="pure-u-1 pure-u-md-1-3"><p><strong>{{name}}</strong></p></div><!--pure--><div class="pure-u-1 pure-u-md-1-3"><p><strong>{{sku}}</strong><span class="fadedtext">{{price}}</span><br></p></div><!--pure--><div class="pure-u-1 pure-u-md-1-3"><p><strong>{{interval}}</strong></p></div><!--pure--></a><div class="more"><div class="toggle"></div><!--toggle--><div class="actions"><div class="action-inner"><a href="{{www_path}}/commerce/subscriptions/detail/{{id}}" class="mininav_flush"><div class="icon icon-pencil"></div><!--icon-->{{copy_edit}}</a><a href="{{www_path}}/commerce/subscriptions/delete/{{id}}" class="mininav_flush needsconfirmation"><div class="icon icon-ban"></div><!--icon-->{{copy_delete}}</a></div><!--action-inner--></div><!--actions--></div><!--more--></li>
			{{/plans}}
		</ul>
{{^plans}}
	<div class="empty"><p>{{copy_no_plans}}</p></div><!--empty-->
{{/plans}}

    <a class='button lightboxed' href="{{www_path}}/commerce/subscriptions/add">{{copy_add_plan}}</a>
{{/firstuse}}
